<template>
	<view class="main-cont">
		<view class="box box-tb box-pack-center box-align-start">
			<video :src="stage.videoUrl" controls class="video" v-if="stage.videoUrl !=null"></video>
			<view class="content">
				<view class="cousdesctab">
					学习资料
					<view class="fenxiang" @click="showfx" v-if="showfxbtn"> 分享 </view>
				</view>
				<view class="res-cont">
					<view class="list box box-align-center box-pack-start mr10" v-for="(item,index) in stage.files" @click="play(item)" :key="index">
						<u-image src="@/static/home/word.png" width="50rpx" height="50rpx" v-if="item.fileSuffix == `doc` || item.fileSuffix == `docx`"></u-image>
						<u-image src="@/static/home/ppt.png" width="36rpx" height="36rpx" v-if="item.fileSuffix == `ppt` || item.fileSuffix == `pptx`"></u-image>
						<view class="ml10 file-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="text-cont" v-if="stage.info == 'null' || stage.info==''">
				<view class="box box-align-center box-pack-start top">
					<view class="number">
						{{chapterIndex}}
					</view>
					<view class="ml5 p">
						{{chapterName}}
					</view>
				</view>
				<view class="text">
					{{stage.info == null?'暂无介绍':stage.info}}
				</view>
			</view>
			<view class="text-cont" v-else>
				<view class="text" style="color: gray;">暂无介绍</view>
			</view>
		</view>
		
		<u-popup v-model="showfenxiang" mode="bottom" border-radius="8" length="45%">
					<view>
						<u-field v-model="fxtitle" label="标题" placeholder="请填写标题" ></u-field>
						<u-field v-model="title" label="选择图片" disabled="true" > </u-field>
						<view class="updimg">
						<u-upload :action="action" :file-list="fl" max-count="1"  @on-uploaded="onuploaded" ></u-upload>
						</view>
					</view>
					<view>
						<u-button  open-type="share" type="primary">确定</u-button>
					</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="bottom"  length="50px" >
			<view class="loginpop" @click="goindex">
				请登录/注册
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sectionid:0,
				stage:{},
				chapterName:'',
				chapterIndex:'',
				user: uni.getStorageSync('user'),
				showlogin:false,
				fxtitle:'',
				fximg:'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D',
				showfxbtn:true,//是否显示分享按钮
				action:this.$api.baseUrl + '/comm/uploadfile',
				fl:[],
				showfenxiang:false,
				
			}
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
					title: this.fxtitle, 
					path: '/pageHome/chaperDetail?id='+this.sectionid,
					imageUrl: this.fximg
			}
		},
		onLoad(opt) {
			this.sectionid = opt.id;
			this.getStageInfo();
			if(this.user==null || this.user==""){
				this.$refs.uTips.show({
								title: '未注册用户！暂不记录学习进度',
								type: 'error',
								duration: '2300'
							})
				setTimeout(() => {this.showlogin=true;}, 2300);
			}
		},
		methods: {
			onuploaded(lists,name){
				this.fximg=lists[0].response.url;
			},
			showfx(){
				wx.vibrateShort();
				this.fxtitle=this.chapterName;//默认
				this.showfenxiang=true;
			},
			goindex(){
				wx.vibrateShort();
				uni.navigateTo({
					url:'../pages/index/index'
				})
			},
			getStageInfo(){
				let opts = {
					url: '/ycousstage/getStageInfo',
					method: 'post'
				};
				let params = {
					sectionid: this.sectionid,
				};
				this.$api.post(opts, params).then(res => {
					this.stage = res.data;
					//console.log(this.stage)
					this.chapterName = this.stage.title
					
					uni.setNavigationBarTitle({
					    title:`第${res.data.num}章 ${res.data.title}`
					});
					
					if(this.stage.num <= 9){
						this.chapterIndex = `0${res.data.num}`
					}else{
						this.chapterIndex = `${res.data.num}`
					}
				})
			},
			previewImage(val, i) {
				//console.log(val);
				if (val.type == 'jpg' || val.type == 'png') {
					uni.previewImage({
						current: val, // 当前显示图片的 http 链接
						urls: this.stuList[i].imgurl.map(res => {
							if (res.type != "mp4") return res.url
						}).filter(i => i && i.trim()) // 需要预览的图片 http 链接列表
					});
				}
			},
			play(item) {
				const arr = ['doc','docx','xls','xlsx','ppt','pptx','pdf'];
				
				const isOk = arr.includes(item.fileSuffix);
				if (isOk) {
					uni.showLoading({
						title:"loading",
						icon:'none'
					});
					wx.downloadFile({
						url: item.url,
						success: res => {
							//console.log(res);
							var filePath = res.tempFilePath; // 1.下载文件获取临时地址
							wx.openDocument({
								filePath: filePath,
								fileType: item.fileSuffix,
								showMenu:true,
								success: function(e) {
									uni.hideLoading()
								},
								fail: function(e) {
									uni.showToast({
										title: '暂不支持此类型',
										icon:'none',
										duration: 2000
									});
								}
							});	
						}
					}); 
				}else{
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;

		.video {
			width: 100%;
			height: 392rpx;
		}
		
		.content {
			width: 100%;
			padding: 39rpx 21rpx;
		}

		.res-cont {
			overflow-y: hidden;
			overflow-x: scroll;
			display: flex;
			white-space: nowrap;
			width: 100%;
			height: 140rpx;
			padding: 20rpx 0;

			.list {
				padding: 0 20rpx;
				width: 462rpx;
				// height: 108rpx;
				background: #FFFFFF;
				box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
				border-radius: 20rpx;
				font-size: 27rpx;
				
				.file-name {
					width: 100%;
					  white-space:nowrap;/* 规定文本是否折行 */  
					  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
					  text-overflow: ellipsis;
				}
			}
		}
		
		.text-cont {
			margin: 0 auto;
			padding: 30rpx 14rpx;
			width: 722rpx;
			background: #FFFFFF;
			box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
			border-radius: 20rpx;
			
			.top {
				height: 110rpx;
				border-bottom: 2rpx solid #F0F1F8;
			}
			.text {
				width: 100%;
				padding: 47rpx 37rpx;
			}
		}
		
		.number {
			width: 70rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			
			&:after {
				content: '';
				width: auto;
				width: 40rpx;
				height: 12rpx;
				background: #7C79F5;
				border-radius: 6rpx;
				display: block;
				margin-top: -32rpx;
				margin-left: 16rpx;
				z-index: 111111;
			}
		}
		.number + .p {
			font-size: 34rpx;
			font-weight: bold;
		}
	}
	.loginpop{
		background: #b58927;
		color: #e2e0e0;
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 16px;
		padding-top: 10px;
	}
	.fenxiang {
	    position: absolute;
	    right: 40rpx;
	    width: 120rpx;
	    height: 48rpx;
	    line-height: 48rpx;
	    text-align: center;
	    background: #F99115;
	    box-shadow: 0px 2px 10rpx 0px rgba(182, 129, 39, 0.3);
	    border-radius: 24rpx;
	    color: #fff;
	    font-size: 24rpx;
	}
	.cousdesctab{
		display: flex;
	}
	.updimg{
		padding-left: 25%;
		margin-bottom: 30px;
	}
</style>
